03.6 精通自定义 View 之属性动画——Animator 动画的 XML 实现

发表于 | 分类于 |

返回自定义 View 目录

在 xml 中对应 animator 总共有三个标签，分别是：

1
2
3
<animator/>: 对应 ValueAnimator
<objectAnimator/>: 对应 ObjectAnimator
<set/>: 对应 AnimatorSet

3.6.1 animator 标签

1. 概述

下面是完整的 animator 所有的字段及取值范围：

1
2
3
4
5
6
7
8
9
<animator
    android:duration="int"
    android:valueFrom="float | int | color"
    android:valueTo="float | int | color"
    android:startOffset="int"
    android:repeatCount="int"
    android:repeatMode=["repeat" | "reverse"]
    android:valueType=["intType" | "floatType"]
    android:interpolator=["@android:interpolator/XXX"]/>

  • android:duration：每次动画播放的时长。
  • android:valueFrom：初始动化值；取值范围为 float、int 和 color，如果取值为 float 对应的值样式应该为 89.0，取值为 Int 时，对应的值样式为：89；当取值为 clolor 时，对应的值样式为 #333333。
  • android:valueTo：动画结束值；取值范围同样是 float、int 和 color 这三种类型的值。
  • android:startOffset：动画激活延时；对应代码中的 startDelay(long delay) 函数；
  • android:repeatCount：动画重复次数
  • android:repeatMode：动画重复模式，取值为 repeat 和 reverse；repeat 表示正序重播，reverse 表示倒序重播
  • android:valueType：表示参数值类型，取值为 intType 和 floatType；与 android:valueFrom、android:valueTo 相对应。如果这里的取值为 intType，那么 android:valueFrom、android:valueTo 的值也就要对应的是 int 类型的数值。如果这里的数值是 floatType，那么 android:valueFrom、android:valueTo 的值也要对应的设置为 float 类型的值。非常注意的是，如果 android:valueFrom、android:valueTo 的值设置为 color 类型的值，那么不需要设置这个参数。
  • android:interpolator：设置加速器；有关系统加速器所对应的 xml 值对照表如下：

加载 XML 文件到程序中的方法：

1
2
3
ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(
    MainActivity.this, R.animator.animator);
valueAnimator.start();

2. 示例

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
          android:valueFrom="0"
          android:valueTo="300"
          android:duration="1000"
          android:valueType="intType"
          android:interpolator="@android:anim/bounce_interpolator"/>
1
2
3
4
5
6
7
8
9
10
11
ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(
        MainActivity.this, R.animator.animator);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
       int offset = (int)animation.getAnimatedValue();
       mTv1.layout(offset, offset, mTv1.getWidth() + offset,
                   mTv1.getHeight() + offset);
   }
});
valueAnimator.start();

3.6.2 objectAnimator 标签

1. 概述

1
2
3
4
5
6
7
8
9
10
<objectAnimator
    android:propertyName="string"
    android:duration="int"
    android:valueFrom="float | int | color"
    android:valueTo="float | int | color"
    android:startOffset="int"
    android:repeatCount="int"
    android:repeatMode=["repeat" | "reverse"]
    android:valueType=["intType" | "floatType"]
    android:interpolator=["@android:interpolator/XXX"]/>
  • android:propertyName：对应属性名，即 ObjectAnimator 所需要操作的属性名。其它字段的意义与 animator 的意义与取值是一样的，下面再重新列举一下。

2. 示例

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="TranslationY"
    android:duration="2000"
    android:valueFrom="0.0"
    android:valueTo="400.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:valueType="floatType"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:startOffset="2000"/>
1
2
3
4
ObjectAnimator animator = (ObjectAnimator) AnimatorInflater.loadAnimator(
        MainActivity.this, R.animator.object_animator);
animator.setTarget(mTv1);
animator.start();

3. color

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="BackgroundColor"
    android:duration="5000"
    android:valueFrom="#ffff00ff"
    android:valueTo="#ffffff00"/>
1
2
3
4
ObjectAnimator animator = (ObjectAnimator) AnimatorInflater.loadAnimator(
        MainActivity.this, R.animator.color_animator);
animator.setTarget(mTv1);
animator.start();

3.6.3 set 标签

1
<set android:ordering=["together" | "sequentially"]>

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:propertyName="x"
        android:duration="500"
        android:valueFrom="0"
        android:valueTo="400"
        android:valueType="floatType"/>
    <objectAnimator
        android:propertyName="y"
        android:duration="500"
        android:valueFrom="0"
        android:valueTo="300"
        android:valueType="floatType"/>
</set>

加载：

1
2
3
4
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(
        MainActivity.this, R.animator.set_animator);
set.setTarget(mTv1);
set.start();